<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="components/head :: head(~{:: title}, ~{:: link})">
    <title>标签</title>
    <link rel="stylesheet" th:href="@{/css/wen.css}">
    <link rel="stylesheet" th:href="@{/css/type.css}">
</head>
<body>
<div>
    <!-- Header -->
    <div th:replace="components/navbar_and_head :: navbarAndHeader"></div>
    <!-- End Header -->

    <!-- Content -->
    <div class="container">
        <!-- Body -->
        <div class="container">
            <div class="col-md-12">
                <h1 class="page-title">文章标签 <small> Tags</small></h1>
                <div class="label-area">
                <span class="label label-default" th:each="tag : ${tags}"
                      th:classappend="${tag.id == activeTypeId ? 'label-active' : ''}">
                    <a th:href="@{'/tag/' + ${tag.id}}" th:text="${tag.name}"></a>
                    <span class="badge" th:text="${tag.articles.size()}"></span>
                </span>
                </div>
                <!-- Articles -->
                <div class="col-md-12">
                    <div class="col-md-12" th:if="${page.content.size() == 0}" style="margin-top: 30px">
                        <h1>No Data</h1>
                    </div>

                    <div th:if="${page.content.size() != 0}">
                        <!-- Articles -->
                        <div>
                            <div class="article" th:each="article : ${page.content}">
                                <div>
                                    <h1>
                                        <a th:href="@{'/article/' + ${article.id}}" th:text="${article.title}"></a>
                                    </h1>
                                </div>
                                <div>
                                    <p th:text="|${#strings.abbreviate(article.content, 400)}|">
                                    </p>
                                </div>
                                <div class="article-info">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                    <span class="info-content"
                                          th:text="${#dates.format(article.updateTime, 'yyyy-MM-dd')}"></span>
                                    <span class="glyphicon glyphicon-th-list"></span>
                                    <span class="info-content" th:text="${article.type.name}"></span>
                                    <span class="glyphicon glyphicon-eye-open"></span>
                                    <span class="info-content" th:text="${article.views}"></span>
                                    <span class="glyphicon glyphicon-tag"></span>
                                    <span class="info-content" th:each="tag : ${article.tags}"
                                          th:text="${tag.name}"></span>
                                </div>
                                <div>
                                    <a th:href="@{'/article/' + ${article.id}}" class="btn btn-default pull-right">
                                        Read More
                                    </a>
                                </div>
                            </div>
                        </div>
                        <!-- End Articles -->
                    </div>
                    <!-- End Articles -->
                </div>
                <!-- End Articles -->
            </div>

            <!-- Pagination -->
            <nav aria-label="Page navigation" class="col-md-offset-4 col-lg-offset-4col-xl-offset-4">
                <ul class="pagination">
                    <li class="disabled" th:if="${page.first == true}">
                <span>
                    <span aria-hidden="true">&laquo;</span>
                </span>
                    </li>
                    <li th:if="${page.first == false}">
                        <a th:href="@{/(page=${page.number} - 1)}" aria-label="Next"
                           onclick="page(this)" th:attr="data-page=${page.number - 1}">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="disabled" th:if="${page.last == true}">
                <span>
                    <span aria-hidden="true">&raquo;</span>
                </span>
                    </li>
                    <li th:if="${page.last == false}">
                        <a th:href="@{/(page=${page.number} + 1)}" aria-label="Next"
                           onclick="page(this)" th:attr="data-page=${page.number + 1}">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- End Pagination -->
        </div>
        <!-- End Body -->

        <!-- Footer -->
        <div th:replace="components/footer :: footer"></div>
        <!-- End Footer -->
    </div>
    <!-- End Content -->
</div>
</body>
</html>
